<template>
  <ul class="catagtory">
    <li
      v-for="item in catagtory"
      :key="item.id"
      @click="$store.commit('catagtory/updateCurrentCatagtory', item.id)"
      :class="{ select: item.id === currentCatagtory }"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
// 组件中使用vuex
// 导入辅助函数
import { mapGetters } from 'vuex'
export default {
  computed: {
    // 这两个状态在store/catagtory.js定义好了, 只是通过getters的辅助函数来调用
    ...mapGetters(['catagtory', 'currentCatagtory']) // 访问state中的状态
  },
  created() {
    // 调用catagtory的actions
    // 因为是在模块中, 所以要写模块名
    this.$store.dispatch('catagtory/getCatagtory')
  }
}
</script>

<style>

</style>